/*
 * @Author: xiaoyan
 * @Date: 2021-11-25 10:58:00
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-02-10 14:41:58
 * @Description: 
 * @FilePath: \user_auth_front\src\pages\application\components\add.tsx
 */
import { Input, Form,Select, Row,Col, message } from "antd";
import { useMappedState,useDispatch} from 'redux-react-hook';
import { closeModal } from "@/store/modules/app"
import store from "@/store";
import { applicationAdd, applicationDetail, applicationUpdate } from "@/api";
import { IApplication, IRes } from "@/interface";
import { useEffect, useMemo } from "react";
import SelectOrganizationLists from "@/pages/components/SelectOrganizationLists";
export default ()=>{
    const { Option } = Select;
    const dispatch = useDispatch();
    //const organizationLists = useMappedState(state=>state.dictionary.organizationLists);
    const [form] = Form.useForm();
    const dialogData:any = store.getState().app.modalConf;
    const id = useMemo(()=>dialogData.data,[dialogData.data]);
    dialogData.handleOk = form.submit;//设置手动提交事件

    useEffect(()=>{
        if(id) ajaxDetail(id);
    },[id]);

    //请求详情数据
    const ajaxDetail = (id:Number)=>{
        applicationDetail({id}).then((res:IRes<IApplication>)=>{
            if(res.code === 0){
                const {name,organizationId,code,remark,url} = res.data;
                form.setFieldsValue({
                    name,
                    organizationId,
                    code,
                    remark,
                    url,
                });
            }else{
                message.error(res.msg);
            }
        });
    };

    const onFinish = (data:object)=>{
        handleSubmit(data).then((res:IRes)=>{
            if(res.code === 0){
                const modalConf:any = store.getState().app.modalConf;
                if(typeof modalConf.handleBack === "function") {
                    id?modalConf.handleBack() : modalConf.handleBack({page:1});
                }
                dispatch(closeModal());
            }else{
                message.error(res.msg);
            }
        });
    };
    const handleSubmit = (data:Object)=>{
        if(id){
            return applicationUpdate({applicationId:id,...data});
        }else{
            return applicationAdd(data);
        }
    };

    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    /* const SelectOrganizationLists = organizationLists.map((item:any)=>
        <Option key={item.organizationId} value={item.organizationId}>{item.name}</Option>
    ); */
    return (
        <Form form={form} onFinish={onFinish} {...formItemLayout}>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="应用名称：" name="name" rules={[{required: true, message: '请输入应用名称'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="所属机构：" name="organizationId" rules={[{required: true, message: '请选择所属机构'}]}>
                        <Select style={{ width: "100%" }} allowClear>
                            {SelectOrganizationLists()}
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="应用URL：" name="url">
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="应用编码：" name="code" rules={[{required: true, message: '请输入应用编码'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="备注：" name="remark">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    );
};